<template>
    <div class="point-box">
        <ul class="title">
            <li>
                未完成: {{ pointData.noReachTotal }}
            </li>
            <li>
                完成标准: {{ pointData.finishTotal }}
            </li>
            <li>
                完成目标: {{ pointData.reachTotal }}
            </li>
        </ul>
        <div id="index-point-finish" :class="className" :style="{height:height,width:width}"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'index-point-finish',
        props: {
            className: {
                type: String,
                default: 'point-finish-chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '100%'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            pointData: {
                type: Object
            }
        },
        data () {
            return {
                chart: null,
                isResize:true,
            }
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById('index-point-finish'));
                this.setOptions()
            },
            setOptions({} = {}) {
                this.chart.setOption({
                    title: {
                        text: '质控点完成情况',
                        left: 'center',
                        top: 20,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        data: ['未完成', '完成标准', '完成目标'],
                        icon:"circle", // 修改形状
                        itemHeight: 10, // 修改图标大小
                        bottom: 0
                    },
                    color: ['#3AA1FF', '#36CBCB', '#4ECB73'],
                    series: [
                        {
                            name: '质控点完成情况',
                            type: 'pie',
                            center: ['50%', '60%'],
                            radius : '48%',
                            avoidLabelOverlap: false,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            label: {
                                formatter: '{b} \n ({d}%)'
                            },
                            data: [
                                {value: this.pointData.noReachTotal || 0, name: '未完成'},
                                {value: this.pointData.finishTotal || 0, name: '完成标准'},
                                {value: this.pointData.reachTotal || 0, name: '完成目标'}
                            ].sort(function (a, b) { return a.value - b.value; })
                        }
                    ]
                }, true);
                window.onresize = this.chart.resize;
            }
        },
        watch: {
            pointData: {
                handler(val) {
                    this.initChart();
                },
                deep: true
            }
        }
    }
</script>

<style lang="scss" scoped>
.point-box{
    width: 40%;
    position: relative;
    .title{
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 90%;
        li{
            font-weight: bold;
        }
        li:first-child {
            color: #3AA1FF;
        }
        li:nth-child(2) {
            color: #36CBCB;
        }
        li:last-child {
            color: #4ECB73;
        }
    }
}
</style>
